<!-- SCRIPTS -->
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

<!-- BODY -->
<h1>Synchronising Two Maps</h1>
<p>This example shows two maps. The upper map allows for moving and zooming. The lower map observes the upper map's zoom level and position and adopts these values every time the upper map changes.</p>
<hr/>
<h3>Movable Map</h3>
<div id="map" style="width: 600px; height: 300px; background: grey;" ></div>
<hr/>
<h3>Static Map</h3>
<div id="panel" style="width: 600px; "></div>
